<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="renderer" content="webkit" />
    <meta name="theme-color" content="#ffffff" />
    <link rel="icon" href="/favicon.ico" />
    <title>nest-admin后台管理系统</title>

    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'" />
    <noscript>
      <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet" />
    </noscript>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        height: 100%;
        font-family: 'Open Sans', sans-serif;
        background: #fff;
      }

      #app {
        height: 100%;
        position: relative;
      }

      #loader {
        position: absolute;
        top: 40%;
        left: 50%;
        display: grid;
        grid-template-columns: repeat(3, 16px);
        grid-template-rows: repeat(3, 16px);
        gap: 4px;
        transform: translate(-50%, -50%) rotate(45deg);
      }

      #loader span {
        width: 16px;
        height: 16px;
        background-color: #c0c4cc;
        border-radius: 4px;
        animation: loading 1.4s ease-in-out infinite;
      }

      @keyframes loading {
        0%,
        100% {
          opacity: 0;
          transform: scale(0);
        }
        35%,
        65% {
          opacity: 1;
          transform: scale(1);
        }
      }

      #loader span:nth-child(1) {
        animation-delay: 0s;
      }
      #loader span:nth-child(2) {
        animation-delay: 0.1s;
      }
      #loader span:nth-child(3) {
        animation-delay: 0.2s;
      }
      #loader span:nth-child(4) {
        animation-delay: 0.3s;
      }
      #loader span:nth-child(5) {
        animation-delay: 0.4s;
      }
      #loader span:nth-child(6) {
        animation-delay: 0.5s;
      }
      #loader span:nth-child(7) {
        animation-delay: 0.6s;
      }
      #loader span:nth-child(8) {
        animation-delay: 0.7s;
      }
      #loader span:nth-child(9) {
        animation-delay: 0.8s;
      }

      .load_title {
        text-align: center;
        color: #909399;
        font-size: 14px;
        position: absolute;
        top: 55%;
        left: 50%;
        transform: translateX(-50%);
      }

      @media (max-width: 600px) {
        #loader {
          grid-template-columns: repeat(3, 12px);
          grid-template-rows: repeat(3, 12px);
          gap: 3px;
        }
        #loader span {
          width: 12px;
          height: 12px;
        }
        .load_title {
          font-size: 12px;
        }
      }
    </style>
  </head>

  <body>
    <div id="app">
      <div id="loader">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
      <div class="load_title">正在加载系统资源，请耐心等待</div>
    </div>

    <script type="module" src="/src/main.js"></script>
  </body>
</html>
